//模态框组件
<template>
  <IconSun :iconName="'icon-zhuyi'" :width="25" :height="25" @click="isshow = true" />
  <teleport to="body">
    <div v-if="isshow" class="modal">
      <div>
        <h2>关于：</h2>
        <span>这个应用可以用来追踪你选择城市的当前天气</span>
        <br />
        <h2>如何使用：</h2>
        <span>1. 点击搜索框输入你希望追踪的城市</span>
        <span>2. 在搜索结果中选中一个城市，你将获取当地最新的天气</span>
        <span>3. 点击右侧的 + 号可以将追踪城市的天气情况保存在首页</span>
        <br />
        <h2>移除城市：</h2>
        <span>如果你不想在首页关注某个城市，可以通过底部的按钮移除它</span>
        <el-button type="primary" color="rgb(0,102,138)" @click="isshow = false">Close</el-button>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'
const isshow = ref(false)
</script>

<style lang="scss" scoped>
.modal {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  background-color: white;
  width: 350px;
  height: 350px;
  padding: 15px;
  font-size: 14px;
  h2 {
    font-weight: 500;
    font-size: 18px;
    padding-bottom: 5px;
  }
  button {
    position: absolute;
    left: 20px;
    bottom: 20px;
  }
}
</style>
